<!-- 
书写顺序规范：
    第一档：元素模型、布局排版+位置偏移、显示隐藏
            display
            position | float | clear
            top | right | bottom | left
            visibility | overflow
    第二档：自身属性：盒子模型+背景
            width | height
            padding | border | margin
            boacground
    第三档：文本属性（颜色、大小、样式、行高、间隙）
            color | font
            text-decoration | text-align
            white-space | break-word
    第四档：其它样式属性、CSS3属性
            content | cursor | border-sizing | border-radius
            text-shadow | background:linear-gradient()

注意：
    1）前三档中，如果有CSS3的用法，则把它们放到第四档中
        background: rgb();              // 放在第二档
        background: rgba();             // 放在第四档，因为rgba是CSS3的内容
        background: linear-gradient();  // 放在第四档，因为linear-gradient是CSS3的内容
    2）CSS3属性放后面主要是为了方便给兼容性问题修改做铺垫的
-->

 <style>
    span {
        /* 第一档 */
        display: inline-block;
        position: fixed;
        top: 100px;
        /* float: right; */
        /* clear: both; */
        /* visibility: hidden; */
        /* overflow: auto; */
        
        /* 第二档 */
        width: 200px;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        background-color: cyan;
        
        /* 第三档 */
        color: blue;
        font-size: large;
        text-align: center;
        
        /* 第四档 */
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 15px;
    }
 </style>

 <span>hello world</span>